<template>
    <div class="page-wrap">
<!--      {{curDeployStatus}}-&#45;&#45;curDeployStatus 3 6 8 14-->
        <div class="controlBtn">
            <Poptip
                confirm
                title="确定要保存课件吗？"
                @on-ok="repAndCreateTip"
                v-if="!disabled"
                transfer
            >
                <Button type="primary" :disabled="disabled">保存课件</Button>
            </Poptip>
            <WarningTip
                v-if="!disabled"
                content="保存课件前请确认课件环境和接入机器已配置完毕"
            ></WarningTip>
            <!-- <span style="color:#f90" v-if="!disabled">
                <Icon
                    type="ios-information-circle"
                />保存课件前请确认课件环境和接入机器已配置完毕</span
            > -->
            <template v-if="replaceTotal > 0">
                <h3 style="margin: 20px 0px;">替换模板记录列表</h3>
                <TableList
                    ref="selection"
                    :columns="replaceCol"
                    :data="replaceList"
                    :total="replaceTotal"
                    :page="queryReplaceInfo.pageIndex"
                    :size="queryReplaceInfo.pageSize"
                    @queryFun="getRepTemplateList"
                ></TableList>
            </template>
        </div>
        <Modal
            v-model="loading"
            title="保存课件"
            width="400px"
            :mask-closable="false"
            :closable="false"
            footer-hide
        >
            <h3>
                <Icon
                    type="ios-loading"
                    size="24"
                    class="demo-spin-icon-load"
                    style="margin-right:24px;"
                ></Icon
                >{{ distriTip }}
            </h3>
            <Alert type="warning" show-icon style="margin-top:10px;">请勿离开此页面！！</Alert>
        </Modal>
    </div>
</template>
<script>
//  import encryption from '@/libs/encryption.js'
import {
    repAndCreateTemplate,
    getRepTemplateList,
    getProjectInfo,
    clearDeloyPro,
    experimentDetail
} from '@/api/selfStudy/courseExp.js';
export default {
    components: {},
    props: ['ecId', 'prjId', 'envTemplateId', 'deployStatus', 'ecName', 'disabled', 'accessName'],
    data() {
        return {
            loading: false,
            distriTip: '',
            replaceList: [],
            replaceTotal: 0,
            replaceCol: [
                {
                    title: '新模板名称',
                    key: 'newTemplName'
                },
                {
                    title: '原模板名称',
                    key: 'templName'
                },
                {
                    type: 'showTime',
                    title: '替换时间',
                    key: 'createTime'
                }
            ],
            queryReplaceInfo: {
                pageIndex: 1,
                pageSize: 10,
                ecId: this.ecId
            },
            timeout: 0,
            hasProject: true, //工程是否存在
            curDeployStatus: 0
        };
    },
    created() {
        // 获取用户id
        this.USER_ID = this.$store.state.user.userId;
        //this.userName = this.$store.state.user.username
    },
    mounted() {
        this.getRepTemplateList();
        this.getProjectInfo();
    },
    beforeRouteLeave(to, from, next) {},
    watch: {
        prjId(val) {
            if (val) {
                this.hasProject = true;
                this.getProjectInfo();
            } else {
                this.hasProject = false;
            }
        }
    },
    methods: {
        repAndCreateTip() {
            if (!this.accessName) {
                this.$Message.info('默认接入机器没有设置');
                return;
            }
            this.getProjectInfo().then((data) => {
                if (this.canClear()) {
                    //工程未清空
                    
                    this.clearDeploy();
                } else {
                    this.repAndCreate();
                }
            });
        },
        repAndCreate() {
            this.loading = true;
            this.distriTip = '正在保存课件...';
            let data = {
                ecId: this.ecId,
                ecName: this.ecName,
                projectId: this.prjId,
                templId: this.envTemplateId
            };
            repAndCreateTemplate(data)
                .then((data) => {
                    if (data.code == 1) {
                        this.getRepTemplateList();
                        this.$emit('getExperStatus');
                        // this.$Message.info(data.message);
                        this.$Message.info({
                            content: data.message,
                            duration: 8
                        });
                        // setTimeout(() => {
                        //     this.returnExper();
                        // }, 3000);
                    } else {
                        this.$Message.error(data.message);
                    }
                    this.loading = false;
                })
                .catch((error) => {
                    console.log(error);
                    this.loading = false;
                });
        },
        returnExper() {
            let expType = this.$route.query.expType;
            let returnName = '';
            switch (expType) {
                case '0':
                    returnName = 'operationExper';
                    break;
                case '1':
                    returnName = 'videoExper';
                    break;
                case '2':
                    returnName = 'coursewareExper';
                    break;
                default:
                    returnName = 'operationExper';
            }
            this.$router.push({
                name: returnName,
                query: {
                    page: this.$route.query.page
                }
            });
        },
        getRepTemplateList() {
            getRepTemplateList(this.queryReplaceInfo)
                .then((data) => {
                    if (data.code == 1) {
                        this.replaceList = data.data.items;
                        this.replaceTotal = data.data.total;
                        this.$emit('setReplaceTotal', data.data.total);
                    } else {
                        this.$Message.error(data.message);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        changePage(page) {
            this.queryReplaceInfo.pageIndex = page;
            this.getRepTemplateList();
        },
        canClear() {
            return (
                this.curDeployStatus == 3 ||
                this.curDeployStatus == 6 ||
                this.curDeployStatus == 8 ||
                this.curDeployStatus == 14
            );
        },
        clearDeploy() {
            this.loading = true;
            this.distriTip = '正在清空工程';
            //console.log('正在清空工程啊啊啊啊-------clearDeloyPro,,,,')
            let params = {
                projectId: this.prjId
            };
            clearDeloyPro(this.prjId, params)
                .then((res) => {
                    if (res.code === 1) {
                        //                          this.$Message.success({
                        //                              content:res.message,
                        //                              duration:3,
                        //                          })
                        this.getExperStatus();
                    } else if (res.code === 3) {
                        this.getExperStatus();
                        //                          this.$Message.info({
                        //                              content:res.message,
                        //                              duration:3,
                        //                          })
                    } else {
                        this.loading = false;
                        this.$Message.error({
                            content: res.message,
                            duration: 3
                        });
                    }
                })
                .catch((err) => {
                    console.log(err);
                    this.loading = false;
                    this.$Message.error('服务器连接失败！');
                });
        },
        getProjectInfo() {
            if (!this.prjId) {
                return;
            }
            return new Promise((resolve, reject) => {
                getProjectInfo(this.prjId).then((data) => {
                    if (data.code == -2) {
                        this.hasProject = false;
                    } else {
                        this.hasProject = true;
                        this.curDeployStatus = data.data.project.status;// attribute
                    }
                    resolve();
                });
            });
        },
        getExperStatus() {
            clearTimeout(this.timeout);
            getProjectInfo(this.prjId)
                .then((res) => {
                     // console.log('getExperStatus--------',res)
                    if (res.code == 1) {
                        
                        let deployStatus = res.data.project.status;
                        this.curDeployStatus = res.data.project.status;
                        if (deployStatus == 0 || deployStatus == 14) {
                            if (deployStatus == 0) {
                                this.repAndCreate(); //清空之后执行报存
                            } else {
                                this.loading = false;
                            }
                        } else {
                            this.timeout = setTimeout(() => {
                                this.getExperStatus();
                            }, 2000);
                        }
                    }
                })
                .catch((err) => {
                    console.log(err);
                    this.loading = false;
                });
        }
    }
};
</script>
<style scoped>
.demo-spin-icon-load {
    animation: ani-demo-spin 1s linear infinite;
}

@keyframes ani-demo-spin {
    from {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
    }
    to {
        transform: rotate(360deg);
    }
}
</style>
